<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			  
			<view style="margin-top:30rpx;">
				<uni-calendar v-if="visible" :date="date" :startDate='date' :range="rangeVal" @change="change"/>
				  
				<view class="weekday" v-if="showWeek">	 
				 	<view :class="chosenDays.includes(it.name)? 'week_active' :''" v-for="(it,i) in weekList" 
				 	:key="it.name" @click="toggleDay(it.name)">
				 		{{it.name}}
				 	</view>
				 </view>
			</view>
			
			
			<view class="timebox" v-if="endTimeFlag">
				<view class="time"  >
					<view v-for="(it,i) in pmlist" :key="i" :class="activetime==it ? 'activetime' : ''" 
					@click="changetime(it)">
						{{it}}
					</view>
				</view>
			</view> 
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange">
				确认
			</view>
		</view>
	</u-popup> 
	 
</template>

<script>
 	import {getDate} from "@/utils/utils.js"
	
	export default {
		name:"wu-calendar",
		props: {
			 title:{
				 type:String,
				 default:"退款原因"
			 },
			 
			 
			 range:{
				 type:Boolean,
				 default:false
			 },
		},
		 
		data() {
			return {
				calendarKey: 0,
				visible:false,
				rangeVal:false, 
				showWeek:false,
 				weekList:[
					{id:"1",name:"周日"},
					{id:"2",name:"周一"},	
					{id:"3",name:"周二"},
					{id:"4",name:"周三"},
					{id:"5",name:"周四"},
					{id:"6",name:"周五"},
					{id:"7",name:"周六"},
				],
				chosenDays:[],
				selected:[],
				date:'',
				pmlist:["08:00","10:00","12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ],
				activetime:"",
				endTimeFlag:false
			};
		},
		watch:{
			visible(flag){
				if(flag){
					this.date=getDate().fullDate
					this.calendarKey += 1;
					this.chosenDays=[]
				}
			},
			// range(val){
			// 	 this.rangeVal=val
				 
			// }
		} ,
		created() {
 		},
		methods:{
			changetime(time){

				this.activetime = time;
			},
			change(e){
				 
				if(this.rangeVal){
					if (e.range?.data.length) {
						this.selected= e.range?.data
					} else{
						this.selected=[e.fulldate,e.fulldate]
					}
				 
				}else{
					this.selected=[e.fulldate,e.fulldate]
				}
				 
			},
			// 切换某一天的选中状态
			toggleDay(dayName) {
			  if (this.chosenDays.includes(dayName)) {
				// 如果已选中，则移除
				this.chosenDays = this.chosenDays.filter(day => day !== dayName);
			  } else {
				// 如果未选中，则添加
				this.chosenDays.push(dayName);
			  }
			}, 
		 
			/*
			@description 回调事件
			*/ 
			handleChange(){
				let selected=[]
				let chosenDays=[]
				if(this.selected.length){
					selected=this.selected
					chosenDays= this.chosenDays
				}else{
					selected=[getDate().fullDate,getDate().fullDate]	 
				}
				
				if(this.endTimeFlag){
					if(this.activetime){												
						// 1. 将字符串转换为Date对象
						    const choseDate = new Date(selected[0]+" "+this.activetime);
						// 2. 获取当前时间的Date对象
						    const currentDate = new Date();
						if(choseDate < currentDate){
							return uni.showToast({
									title:"请选择当前之后的时间",
									icon:'none'
								})
						}
						selected=[selected[0]+" "+this.activetime,selected[1]+" "+this.activetime]
					}else{
					  return uni.showToast({
							title:"请选择截止时间",
							icon:'none'
						})
					}
				}
				
				if(selected.length<7){
					 // 获取选中日期对应的周几列表
					const daysOfWeekSelected = selected.map(date => this.getDayOfWeek(date));

					// 检查是否所有选中的周都在已选日期中出现过
					const isAllChosenDaysIncluded = chosenDays.every(day => daysOfWeekSelected.includes(day));
					if (!isAllChosenDaysIncluded) {
						return uni.showToast({
							title:"请选择所有已选范围内的星期",
							icon:'none'
						})
					}
				
				}
				this.$emit("confirm", selected ,chosenDays)
				this.visible=false 
			},
			// 定义一个函数来获取日期的周几
			getDayOfWeek(dateString) {
				const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const date = new Date(dateString);
				return daysOfWeek[date.getDay()];
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 30rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.scroll{
		width: 100%;
		height: 600rpx;
		padding-bottom: 30rpx;
		/* background-color: red; */
	} 
}
.weekday{
	width: 100%;
	
	display: flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-around;
	view{
		 
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		 
		font-size: 24rpx;
	}
	.week_active{
		width: 80rpx;
		height: 80rpx;
		background-color: #277EEF;
		border-radius: 40rpx;
		color:#fff;
	}
	
} 

.timebox{
	padding: 10rpx 0;
 
	.time{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		>view{
			padding:20rpx 35rpx;
			margin:  10rpx;
			 
			background-color: #F2F2F2;
			border-radius: 8rpx
		}
		.activetime{
			border: 1px solid #277EEF;
			color: #277EEF;
		}
	}
}

</style>